﻿@{
    Layout = "_Layout";
    ViewData["Title"] = "元数据字段表 - 模型生成";
}
@section Styles {
    <link rel="stylesheet" href="~/codemirror-5.65.11/lib/codemirror.css">
    <link rel="stylesheet" href="~/codemirror-5.65.11/addon/fold/foldgutter.css" />
    <link rel="stylesheet" href="~/codemirror-5.65.11/addon/display/fullscreen.css" />
    <style>
        .custom-select {
            appearance: none; /* 移除默认样式 */
            -webkit-appearance: none;
            -moz-appearance: none;
            background-color: #fff;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            padding: 0 10px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #606266;
            width: 100%; /* 或者设置为固定宽度 */
            outline: none; /* 移除焦点时的边框 */
            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        }

            .custom-select:focus {
                border-color: #409eff;
            }

            .custom-select option {
                padding: 5px 10px;
                background-color: #fff;
                color: #606266;
                font-size: 14px;
            }

                .custom-select option:hover {
                    background-color: #f5f7fa;
                }

            /* 添加一个下拉箭头 */
            .custom-select::after {
                content: '\25BC';
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                pointer-events: none;
                color: #c0c4cc;
                font-size: 14px;
            }

        /* 包裹 <select> 的容器 */
        .custom-select-wrapper {
            position: relative;
            display: inline-block;
            width: 100%; /* 或者设置为固定宽度 */
        }
    </style>
    <link href="~/codemirror-5.65.11/theme/idea.css" rel="stylesheet" />
}
<div>
    <el-row>
        <el-col :span="8">
            <select v-model="selectedLanguage" placeholder="请选择" v-on:change="onChange" class="custom-select">
                <option key="javascript" value="javascript" label="JavaScript + 格式化代码"></option>
                <option key="htmlmixed" value="htmlmixed" label="HTML + 格式化代码"></option>
                <option key="text/css" value="text/css" label="CSS + 格式化代码"></option>
                <option key="text/x-csharp" value="text/x-csharp" label="C#"></option>
                @* <option key="go" value="go" label="Go"></option> *@
                <option key="python" value="python" label="Python"></option>
                @* <option key="php" value="php" label="PHP"></option> *@
                @* <option key="lua" value="lua" label="Lua"></option> *@
                <option key="text/markdown" value="text/markdown" label="Markdown"></option>
                <option key="text/xml" value="text/xml" label="XML"></option>
                <option key="text/vue" value="text/vue" label="Vue"></option>
                <option key="text/yaml" value="text/yaml" label="yaml"></option>
            </select>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <textarea id="code" name="code" style="display: none;">
/// <summary>
/// 
/// </summary>
public partial class CodeGenController : Controller
{
    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    public IActionResult index()
    {
        return View();
    }
}

            </textarea>
        </el-col>
    </el-row>
</div>


@section Scripts {
    <script src="~/codemirror-5.65.11/lib/codemirror.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/foldcode.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/foldgutter.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/brace-fold.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/xml-fold.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/indent-fold.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/markdown-fold.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/comment-fold.js"></script>
    <script src="~/codemirror-5.65.11/mode/javascript/javascript.js"></script>
    <script src="~/codemirror-5.65.11/mode/xml/xml.js"></script>
    <script src="~/codemirror-5.65.11/mode/css/css.js"></script>
    <script src="~/codemirror-5.65.11/mode/htmlmixed/htmlmixed.js"></script>
    <script src="~/codemirror-5.65.11/mode/python/python.js"></script>
    <script src="~/codemirror-5.65.11/mode/markdown/markdown.js"></script>
    <script src="~/codemirror-5.65.11/mode/go/go.js"></script>
    <script src="~/codemirror-5.65.11/mode/php/php.js"></script>
    <script src="~/codemirror-5.65.11/mode/lua/lua.js"></script>
    <script src="~/codemirror-5.65.11/addon/mode/loadmode.js"></script>
    <script src="~/codemirror-5.65.11/addon/display/fullscreen.js"></script>
    <script src="~/codemirror-5.65.11/addon/selection/active-line.js"></script>
    <script src="~/codemirror-5.65.11/mode/vue/vue.js"></script>
    <script src="~/codemirror-5.65.11/mode/yaml/yaml.js"></script>
    <script src="~/codemirror-5.65.11/mode/clike/clike.js"></script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    selectedLanguage: "javascript", // 默认选中 JavaScript
                    editor: null,
                };
            },
            mounted() {
                this.initEdit();
            },
            methods: {
                initEdit() {
                    var te = document.getElementById("code");
                    if (!te) {
                        console.error("无法找到代码编辑区域");
                        return;
                    }
                    this.editor = CodeMirror.fromTextArea(te, {
                        mode: this.selectedLanguage,
                        lineNumbers: true,
                        lineWrapping: true,
                        foldGutter: true,
                        styleActiveLine: true,
                        matchBrackets: true,
                        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                        extraKeys: {
                            "Ctrl-Q": function (cm) {
                                cm.foldCode(cm.getCursor());
                            },
                            "F11": function (cm) {
                                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                            },
                            "Esc": function (cm) {
                                if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                            }
                        }
                    });
                    this.editor.setSize("100%", 660);
                    if (this.editor.lineCount() > 13) {
                        this.editor.foldCode(CodeMirror.Pos(13, 0));
                    }
                },
                onChange() {
                    // 更新 CodeMirror 的模式
                    if (this.editor) {
                        this.editor.setOption("mode", this.selectedLanguage);
                    }
                }
            }
        });
    </script>
}